<style lang="less">
    @import './loginMember.less';
</style>

<template>
    <div class="card">
        <Card :bordered="false" class="card">
            <p slot="title">
                <Icon type="log-in"></Icon>
                欢迎登录
            </p>
            <div>
                <p v-if="loginErro" class="loginErro">{{loginErro}}</p>
            </div>
            <div class="form-con">
                <Form ref="loginForm" :model="form" :rules="rules">
                    <FormItem prop="name">
                        <Input v-model="form.name" placeholder="姓名">
                        <span slot="prepend">
                                <Icon :size="16" type="person"></Icon>
                            </span>
                        </Input>
                    </FormItem>
                    <FormItem prop="phone">
                        <Input v-model="form.phone" placeholder="电话">
                        <span slot="prepend">
                                <Icon :size="14" type="ios-telephone"></Icon>
                            </span>
                        </Input>
                    </FormItem>
                    <FormItem>
                        <Button @click="handleSubmit" type="primary" long>登录</Button>
                    </FormItem>
                </Form>
            </div>
        </Card>
    </div>
</template>

<script>
    import Cookies from 'js-cookie';
    import util from '../libs/util';

    export default {
        data() {
            return {
                form: {
                    name: '',
                    phone: ''
                },
                rules: {
                    name: [
                        {required: true, message: '姓名不能为空', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '电话不能为空', trigger: 'blur'}
                    ]
                },
                loginErro: ''
            };
        },
        methods: {
            handleSubmit() {
                this.loginErro = '';
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        util.ajax.post('/busine/member/memberLogin', util.toFormData({
                            name: this.form.name,
                            phone: this.form.phone
                        })).then(res => {
                            if (res.data.message === 'SUCCESS') {
                                let member = res.data.data;
                                Cookies.set('member', member);
                                this.$router.push({
                                    name: 'memberprizes'
                                });
                            } else {
                                this.loginErro = res.data.message || '未知错误！';
                            }
                        });
                    }
                });
            }
        }
    };
</script>

<style>

</style>
